<form class="layui-form" onsubmit="return false;">
    <input type="hidden" name="id" value="#(bean.id)">
    <div class="pear-container">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">上级</label>
            <div class="layui-input-inline">
                <div id="parent" data-id="0" value="#(bean.parentId)"></div>
            </div>
            <label class="layui-form-label required">状态</label>
            <div class="layui-input-inline">
                <input type="radio" name="status" value="ON" title="启用" #if(bean.status == 'ON' || bean.status == null) checked #end>
                <input type="radio" name="status" value="OFF" title="禁用" #if(bean.status == 'OFF') checked #end>
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label required">名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" value="#(bean.name)" lay-verify="required" autocomplete="off" placeholder="请输入名称" class="layui-input">
            </div>
            <label class="layui-form-label required">类型</label>
            <div class="layui-input-inline">
                <select name="type" lay-filter="type" lay-verify="required">
                    <option value="">-- 请选择 --</option>
                #DICTS("permission_type")
                #for(item : dicts)
                    <option value="#(item.value)" #if(item.value == bean.type) selected #end>#(item.label)</option>
                #end
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label required">排序</label>
            <div class="layui-input-inline">
                <input type="text" name="sort" lay-verify="required|number" autocomplete="off" placeholder="小到大排列" class="layui-input" value="#(bean.sort)">
            </div>
            <label class="layui-form-label MENU">图标</label>
            <div class="layui-input-inline MENU">
                <input type="text" id="icon-picker" name="icon" lay-filter="LAY-iconPicker" class="layui-input" value="#(bean.icon)">
            </div>
        </div>
        <div class="layui-form-item layui-block">
            <label class="layui-form-label">权限值</label>
            <div class="layui-input-block">
                <input type="text" name="value" autocomplete="off" placeholder="用于权限校验的字串" class="layui-input" value="#(bean.value)">
            </div>
        </div>
        <div class="layui-form-item layui-inline MENU">
            <label class="layui-form-label">打开方式</label>
            <div class="layui-input-inline">
                <select name="target" lay-filter="">
                    <option value="">-- 请选择 --</option>
                #DICTS("menu_target")
                #for(item : dicts)
                    <option value="#(item.value)" #if(item.value == bean.target) selected #end>#(item.label)</option>
                #end
                </select>
            </div>
            <label class="layui-form-label MENU">请求方法</label>
            <div class="layui-input-inline">
                <select name="method" lay-filter="">
                    <option value="">-- 请选择 --</option>
                #DICTS("menu_method")
                #for(item : dicts)
                    <option value="#(item.value)" #if(item.value == bean.method) selected #end>#(item.label)</option>
                #end
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-block MENU">
            <label class="layui-form-label">请求地址</label>
            <div class="layui-input-block">
                <input type="text" name="url" autocomplete="off" placeholder="'/'开头或http(s)开头的URL地址" class="layui-input" value="#if(bean.url)#(bean.url)#else#('#')#end">
            </div>
        </div>
        <div class="layui-form-item layui-block">
            <label class="layui-form-label">CSS CLASS</label>
            <div class="layui-input-block">
                <input type="text" name="cssClass" placeholder="页面CSS的class定义" autocomplete="off" class="layui-input" value="#(bean.cssClass)">
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-block" style="display: none;">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="data-save" id="data-save">
                <i class="layui-icon layui-icon-ok"></i> 提交
            </button>
        </div>
    </div>
</form>
#include("/admin/_common/foot.html")
<script type="text/javascript">
layui.use(['jquery', 'form', 'iconPicker', 'xmSelect'], function() {
    var $ = layui.jquery;
    var form = layui.form;
    var iconPicker = layui.iconPicker;
    var xmSelect = layui.xmSelect;
    
    // 模块操作路径
    var MODULE_PATH = "#CTX()/admin/system/permission/";

    /*
     * 初始化图标选择器
     */
    window.initIconPicker = () => {
        iconPicker.render({
            elem: '#icon-picker'
            , type: 'fontClass'
            , page: true
            , search: true
            , limit: 16
            , click: function (obj) {
            },
            ready: function () {
            }
        })
    };

    /*
     * 监听类型下拉框操作
     */
    form.on('select(type)', function(data){
          window.typeChanged(data.value); //得到被选中的值
    });
    
    // 类型变化操作
    window.typeChanged = function(type) {
        if (type == "MENU") {
            $(".MENU").show();
        } else {
            $(".MENU").hide();
        }
        form.render();
    }
    
    /*
     * 初始化上级树
     */
    window.initParentTree = () => {
        xmSelect.render({
            el: "#parent",// 树绑定的元素ID
            name: 'parentId',
            filterable: false,// 是否开启搜索
            radio: true,// 单选模式
            prop: {// 自定义属性
                name: 'title',
                value: 'id',
            },
            tree: {
                show: true,
                showFolderIcon: true,//是否展示三角图标
                showLine: false,// 是否显示虚线
                indent: 20,// 树状虚线距离
                expandedKeys: true,// 展开所有节点
                strict: false,// 勾选父类是否全选下级
                clickExpand: false,// 点击节点是否展开
                clickCheck: true,// 点击节点是否选中
            },
            prop: { // 自定义属性
                value: 'id', // value的值为data中的id值
                name: 'name',
                selected: 'selected',
                disabled: 'disabled',
                children: 'children',
            },
            toolbar: {show: true,list: ['CLEAR']},// 开启工具条
            initValue: ["#(bean.parentId??)"],// 初始化选择
            clickClose: true,//是否点击选项后自动关闭下拉框
            data: window.getParentTreeData()
        });
    }

    /*
     * 从后台获取部门树数据
     */
    window.getParentTreeData = () => {
        var data = [];
        $.ajax({
            url: MODULE_PATH + "tree",    //后台数据请求地址
            async: false,
            success: function(result){
                data = result;
            }
        });
        return data;
    };

    /*
     * 页面加载完成时加载数据
     */
    $(document).ready(() => {
        // 页面加载完成后初始化类型
        window.typeChanged("#(bean.type)");

        // 初始化上级树
        window.initParentTree();

        window.initIconPicker();
    });
});
</script>
